<!--
 * @Author: JiraiyaChen 49619401+JiraiyaChen@users.noreply.github.com
 * @Date: 2024-01-17 11:12:23
 * @LastEditors: JiraiyaChen 49619401+JiraiyaChen@users.noreply.github.com
 * @LastEditTime: 2024-01-17 13:32:43
 * @Description: 流程选择
-->

<template>
  <div>
    <el-input
      style="display: none"
      :value="value | hiddenId"
      :disabled="disabled"
      prefix-icon="el-icon-search"
      :placeholder="placeholder"
      @focus="onFocus"
    />
    <div style="display: flex">
      <span>{{ prepend }}</span>
      <div
        :class="`flow-input ${disabled ? 'flow-input-disabled' : ''}`"
        @click="onFocus"
      >
        <div class="flow-input-row">
          <i class="el-icon-search"></i>
          <div class="flow-input-content">
            <span v-if="!value">{{ placeholder }}</span>
            <div v-if="value" class="flow-input-tabs">
              <div
                class="flow-input-tabs-item"
                v-for="item in ids"
                :key="item.id"
                @click.stop="handleFlowRecord(item)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <span>{{ append }}</span>
    </div>
    <!-- 用户弹窗 -->
    <flow-dialog
      ref="FlowDialog"
      :finish-flag="finishFlag"
      :multi="multi"
      :selected-ids="value | getIds"
      :name-map="value | getNameMap"
      @onSelect="onSelect"
    />
  </div>
</template>

<script>
import FlowDialog from "./dialog/FlowDialog.vue";
export default {
  name: "FlowListArry",
  components: {
    FlowDialog,
  },
  filters: {
    hiddenId(val) {
      return val && val.indexOf("_*_") !== -1 ? val.split("_*_")[0] : val;
    },
    getIds(val) {
      const ids =
        val && val.indexOf("_*_") !== -1
          ? val.split("_*_")[1].split(",")
          : val.split(",");
      // 去空
      return (ids || []).filter((item) => item);
    },
    getNameMap(val) {
      const ids =
        val && val.indexOf("_*_") !== -1
          ? val.split("_*_")[1].split(",")
          : val.split(",");
      const names =
        val && val.indexOf("_*_") !== -1
          ? val.split("_*_")[0].split(",")
          : val.split(",");
      const nameMap = {};
      ids.map((item, index) => {
        nameMap[`${item}`] = names[index];
      });
      return nameMap;
    },
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    multi: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: "请选择用户",
    },
    prepend: {
      type: String,
      default: "",
    },
    append: {
      type: String,
      default: "",
    },
    finishFlag: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    value(newVal) {
      this.ids = this.getIdsForList(newVal);
    },
  },
  data() {
    return {
      ids: this.getIdsForList(this.value),
      url: { list: "/flowable/task/allProcess" },
      selectedFlowParams: {},
      selectedFlowModalTitle: "",
    };
  },
  methods: {
    getIdsForList(val) {
      let ids =
        val && val.indexOf("_*_") !== -1
          ? val.split("_*_")[1].split(",")
          : val.split(",");
      // 去空
      ids = (ids || []).filter((item) => item);
      const names =
        val && val.indexOf("_*_") !== -1
          ? val.split("_*_")[0].split(",")
          : val.split(",");
      return ids.map((item, index) => ({
        id: item,
        name: names[index],
      }));
    },
    onFocus() {
      this.$refs.FlowDialog.dialogVisible = true;
    },
    onSelect(obj) {
      this.$emit(
        "input",
        obj.names && obj.ids ? `${obj.names}_*_${obj.ids}` : ""
      );
    },
    handleFlowRecord(item) {
      console.log("打开 流程预览👉👉👉", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.flow-input {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  display: inline-block;
  background-color: #fff;
  width: 100%;
  cursor: text;
  &:hover {
    border-color: #c0c4cc;
  }
  &.flow-input-disabled {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    cursor: not-allowed;
  }
  .flow-input-row {
    display: flex;
    color: #c0c4cc;
    > i {
      padding: 10px;
      color: #c0c4cc;
    }
    .flow-input-tabs {
      .flow-input-tabs-item {
        display: inline-block;
        height: 24px;
        border-radius: 2px;
        padding: 2px 10px;
        background: #f4f4f5;
        border: 1px solid #fff;
        color: #909399;
        line-height: 20px;
        margin-left: 4px;
        cursor: pointer;
        &:hover {
          color: #409eff;
        }
      }
    }
  }
}
</style>
